<template>
	<u-popup round="20px" mode="bottom" :close-on-click-overlay="false" :show="showPopup" closeable @close="close"
		zIndex="999999">
		<view class="padding-15">
			<view class="padding-bottom-15 font-18 font-weight flex-center">{{title || '请选择'}}</view>
			<view v-if="searchable" class="search-box padding-bottom-15">
				<u-search
					v-model="searchKeyword"
					placeholder="请输入搜索内容"
					:clearabled="true"
					:show-action="false"
					@change="handleSearch"
				></u-search>
			</view>
			<z-paging ref="paging" v-model="dataList" :fixed="false" :refresher-enabled="true" height="600rpx"
				:default-page-size="10" @query="queryList" :show-refresher-when-reload="true">
				<view v-for="item in filteredList" :key="item.dictCode"
					class="flex-between font-16 padding-y-20 padding-x-15 b-bottom" @click="check(item)">
					<view :class="[item.dictCode === selectedDictCode ? 'color-main font-weight' : 'color-black']">{{
              item.dictLabel
            }}</view>
					<u-icon v-if="item.dictCode === selectedDictCode" size="42rpx" color="#1692FF" name="checkmark" />
				</view>
			</z-paging>
			<view class="color-bg-fff margin-top-10">
				<u-button @click="confirm" text="确定" shape="circle" class="color-bg-main color-fff font-weight"
					:customStyle="{ height: '88rpx' }" :disabled="!selectedDictCode"></u-button>
			</view>
		</view>
	</u-popup>
</template>


<script>
	export default {
		name:'YdChoose',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			options:{
				type:Array,
				default:()=>[]
			},
			// 回显数据
			dictCode: {
      	type: [String, Number],
      	default: ''
    	},
			// 是否显示搜索框
			searchable: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dataList: [],
				selectedDictCode: this.dictCode,
				showPopup: false,
				searchKeyword: '',
				filteredList: []
			}
		},
		watch: {
			show: {
				handler(newValue) {
					this.showPopup = newValue
				},
				immediate: true
			},
			dictCode: {
				handler(newValue) {
					this.selectedDictCode = newValue;
				},
				immediate: true
    	},
			searchKeyword: {
				handler(newValue) {
					if (this.searchable) {
						this.handleSearch(newValue);
					}
				}
			}
		},
		methods: {
			check(item) {
				this.selectedDictCode = item.dictCode
			},
			queryList() {
				this.getList()
			},
			async getList() {
				this.$refs.paging.setLocalPaging(this.options);
				this.filteredList = this.options;
			},
			close() {
				this.$emit('onClose')
				this.searchKeyword = '';
			},
			confirm() {
				if (!this.selectedDictCode) {
					uni.showToast({
						title: '请先选择内容',
						icon: 'none'
					})
					return
				}
				const selectedItem = this.options.find(option => option.dictCode === this.selectedDictCode);
				this.$emit('select', selectedItem);
			},
			handleSearch(keyword) {
				if (!keyword) {
					this.filteredList = this.dataList;
					return;
				}
				this.filteredList = this.dataList.filter(item => 
					item.dictLabel.toLowerCase().includes(keyword.toLowerCase())
				);
			}
		},
	}
</script>

<style lang="scss" scoped>
.search-box {
	background-color: #fff;
	border-radius: 8rpx;
}
</style>